    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="hongyan.css">
    </head>
    <body>
        <!--199010110罗浩然-->
        <!--头部-->
        <div class="header-left">
            <img src="logo.png" alt="">
        </div>
        <div class="header-right">
            <img src="icon-18.png" alt="">
        </div>
        <div id="header-link">
            <li>
                <span>设为首页</span>
                <span>|</span>
                <span>加入收藏</span>
                <span>|</span>
                <span>热线：023-65312300（沙坪坝片区）023-63303457（渝中片区）</span>
                <span>|</span>
                <span>English</span>
            </li>
        </div>
        <!--搜索框-->
        <div class="search">
            <input class="search-text" placeholder="请输入关键词" type="text" name="key" inputmode="key" value="">
            <span>搜索</span>
        </div>
        <!--浮动清除-->
        <div class="clear"></div>
        <!--二级菜单-->
        <div id="app" v-cloak>
            <li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">
                <a :href="menu.url">
                    {{menu.name}}
                </a>
                <ul v-show="menu.show">
                    <li v-for="subMenu in menu.subMenus">
                        <a :href="subMenu.url">
                            {{subMenu.name}}
                        </a>
                    </li>
                </ul>
            </li>
        </div>
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            const data = {
                menus:[
                    {
                    name:'首页',url:'#',
                    
                    },
                    {
                        name:'关于红岩',url:'#',show:false,subMenus:[
                            {
                                name:'红岩文化',url:'#'
                            },
                            {
                                name:'博物馆机构',url:'#'
                            },
                            {
                                name:'历史沿革',url:'#'
                            }
                        ]
                    },
                    {
                        name:'公告动态',url:'#',show:false,subMenus:[
                            {
                                name:'文博信息',url:'#'
                            },
                            {
                                name:'政务平台',url:'#'
                            },
                            {
                                name:'公告',url:'#'
                            },
                            {
                                name:"专题报告",url:'#'
                            }
                        ]
                    },
                    {
                        name:'馆藏精品',url:'#',show:false,subMenus:[
                            {
                                name:'一级文物',url:'#'
                            },
                            {
                                name:'二级文物',url:'#'
                            },
                            {
                                name:'三级文物',url:'#'
                            }
                        ]
                    },
                    {
                        name:'陈列展览',url:'#',show:false,subMenus:[
                            {
                                name:'虚拟展览',url:'#'
                            },
                            {
                                name:'基本陈列',url:'#'
                            },
                            {
                                name:'复原陈列',url:'#'
                            },
                            {
                                name:'临时展览',url:'#'
                            },
                            {
                                name:'展览交流',url:'#'
                            }
                        ]
                    },
                    {
                        name:'研究开发',url:'#',show:false,subMenus:[
                            {
                                name:'历史研究',url:'#'
                            },
                            {
                                name:'艺术创作',url:'#'
                            },
                            {
                                name:'影音在线',url:'#'
                            },
                            {
                                name:'文创作品',url:'#'
                            }
                        ]
                    },
                    {
                        name:'公共教育',url:'#',show:false,subMenus:[
                            {
                                name:'党性教育',url:'#'
                            },
                            {
                                name:'爱国主义教育',url:'#'
                            },
                            {
                                name:'研学实践教育',url:'#'
                            },
                            {
                                name:'科普教育',url:'#'
                            },
                        ]
                    },
                    {
                        name:'参观服务',url:'#',show:false,subMenus:[
                            {
                                name:'景点介绍',url:'#'
                            },
                            {
                                name:'服务内容',url:'#'
                            },
                            {
                                name:'网上预约',url:'#'
                            },
                            {
                                name:'志愿服务',url:'#'
                            },
                        ]
                    },
                    {
                        name:'网上预约',url:'#'
                    },
                ]
            };
            const vm = Vue.createApp({
                data(){
                    return data;
                }
            }).mount('#app');
        </script>
    </body>
    </html>